<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html" 
xmlns:f="http://java.sun.com/jsf/core" 
xmlns:c="http://java.sun.com/jsp/jstl/core" 
xmlns:ace="http://www.icefaces.org/icefaces/components"
xmlns:ice="http://www.icesoft.com/icefaces/component"
xmlns:icecore="http://www.icefaces.org/icefaces/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="/WEB-INF/templates/templatePrincipal.xhtml">

<ui:define name="corpo-da-pagina">

<ui:include src="menu.xhtml"></ui:include>

<h:form id="formPrincipal">

	<br />
	<br />

	<fieldset>
	
		<legend> Buscar Titular </legend>

	<h:panelGrid columns="3">
		<h:outputLabel value="CPF do titular" />
		<h:inputText value="#{editClienteMB.cpfBuscado}">
			<f:validator validatorId="br.com.locadoracom.validador.CPFValidator" />
		</h:inputText>
		<h:commandButton value="Buscar" action="#{editClienteMB.buscarPorCPF}" />
	</h:panelGrid>

	</fieldset>

	<br />
	<br />

	<h:panelGrid id="panelGriDadosTitular" columns="4" rendered="#{editClienteMB.titular.cpf != null}" >
		<h:outputLabel value="Nome:" />
		<h:inputText value="#{editClienteMB.titular.nome}" disabled="#{!editClienteMB.emEdicao}" />
		
		<h:outputLabel value="E-Mail:" />
		<h:inputText value="#{editClienteMB.titular.email}" disabled="#{!editClienteMB.emEdicao}" >
			<f:validator validatorId="br.com.locadoracom.validador.EmailValidator" />
		</h:inputText>	
		
		<h:outputLabel value="CPF:" />
		<h:inputText value="#{editClienteMB.titular.cpf}" disabled="#{!editClienteMB.emEdicao}" >
			<f:validator validatorId="br.com.locadoracom.validador.CPFValidator" />
		</h:inputText>
		
		<h:outputLabel value="Sexo:" />
		<h:selectOneMenu value="#{editClienteMB.titular.sexo}" disabled="#{!editClienteMB.emEdicao}" >  
			<f:selectItem itemValue="MASCULINO" itemLabel="Masculino" />  
			<f:selectItem itemValue="FEMININO" itemLabel="Feminino" />  
		</h:selectOneMenu>  
	
		<h:outputLabel value="Nascimento:" />
		<ace:dateTimeEntry value="#{editClienteMB.titular.dataNascimento}" pattern="dd/MM/yyyy" locale="#{loginMB.locale}" renderAsPopup="true" disabled="#{!editClienteMB.emEdicao}" />
		
		<h:outputText value="CEP: " />  
		<h:inputText value="#{editClienteMB.titular.endereco.cep}" disabled="#{!editClienteMB.emEdicao}" />
            	
        <h:outputText value="Logradouro: " />  
		<h:inputText value="#{editClienteMB.titular.endereco.logradouro}" disabled="#{!editClienteMB.emEdicao}" />
            	
        <h:outputText value="Numero: " />  
		<h:inputText value="#{editClienteMB.titular.endereco.numero}" disabled="#{!editClienteMB.emEdicao}" />
            	
        <h:outputText value="Complemento: " />  
		<h:inputText value="#{editClienteMB.titular.endereco.complemento}" disabled="#{!editClienteMB.emEdicao}" />
            	
        <h:outputText value="Bairro: " />  
		<h:inputText value="#{editClienteMB.titular.endereco.bairro}" disabled="#{!editClienteMB.emEdicao}" />
            	
        <h:outputText value="Cidade: " />  
		<h:inputText value="#{editClienteMB.titular.endereco.cidade}" disabled="#{!editClienteMB.emEdicao}" />
				
        <h:outputText value="Estado: " />  
		<h:inputText value="#{editClienteMB.titular.endereco.estado}" disabled="#{!editClienteMB.emEdicao}" />
		
		<h:outputText value="Tel. Celular: " />  
		<h:inputText value="#{editClienteMB.celular}" disabled="#{!editClienteMB.emEdicao}" />
		
		<h:outputText value="Tel. Residencial: " />  
		<h:inputText value="#{editClienteMB.residencial}" disabled="#{!editClienteMB.emEdicao}" />
		
		<h:outputText value="Tel. Comercial: " />  
		<h:inputText value="#{editClienteMB.comercial}" disabled="#{!editClienteMB.emEdicao}" />
		
		<h:outputLabel value="Empresa:" />
		<h:inputText value="#{editClienteMB.titular.empresa}" disabled="#{!editClienteMB.emEdicao}" />			
		
		<h:outputLabel value="Ativo:" />
		<h:selectBooleanCheckbox value="#{editClienteMB.titular.ativo}" disabled="#{!editClienteMB.emEdicao}" />
		
		<h:commandButton value="#{editClienteMB.emEdicao ? 'Salvar' : 'Editar'}" action="#{editClienteMB.salvarEditar}">
			<f:ajax render="panelGriDadosTitular" execute="panelGriDadosTitular" />
		</h:commandButton>	

	</h:panelGrid>
	
	<br />
	<br />
	 
	<h:dataTable id="dataTableDependentes" value="#{editClienteMB.titular.dependentes}" var="dependente" rendered="#{editClienteMB.titular.cpf != null}" style="width:60%;" 
				styleClass="order-table"
				headerClass="order-table-header"
				rowClasses="order-table-odd-row,order-table-even-row">
		<f:facet name="header">Dependentes</f:facet>
	 	<h:column>
	 		<f:facet name="header">Nome</f:facet>
	 		#{dependente.nome}
	 	</h:column>
	 	
	 	<h:column>
	 		<f:facet name="header">E-Mail</f:facet>
	 		#{dependente.email}
	 	</h:column>	 
	 	
	 	<h:column>
	 		<f:facet name="header">Detalhes</f:facet>
	 		<h:commandLink action="#{editClienteMB.setarDependente(dependente)}" onclick="varDialogDetalhesDependente.show();">
	 			<h:graphicImage library="images" name="search-icon.png" />
	 			<f:ajax render="@form" execute="@this" />
	 		</h:commandLink>
	 	</h:column>
	 	
	 	<h:column>
	 		<f:facet name="header">Editar</f:facet>
	 		<h:commandLink action="#{editClienteMB.setarDependente(dependente)}" onclick="varDialogEditarDependente.show();"> 
	 			<h:graphicImage library="images" name="edit-icon.png" />
	 			<f:ajax render="@form" execute="@this" />
	 		</h:commandLink>
	 	</h:column>
	 	
	 	<h:column>
	 		<f:facet name="header">Remover</f:facet>
	 		<h:commandLink action="#{editClienteMB.setarDependente(dependente)}" onclick="varDialogExcluirDependente.show();">
	 			<h:graphicImage library="images" name="delete-icon.png" />
	 			<f:ajax render="@form" execute="@this" />
	 		</h:commandLink>
		</h:column>
	 
		<f:facet name="footer">
			<h:commandLink value="Adicionar Dependente" onclick="varDialogNovoDependente.show();" />
		</f:facet>
	 
	</h:dataTable>

	<ace:dialog id="dialogNovoDependente" header="Adicionar Dependente" widgetVar="varDialogNovoDependente" closable="true" modal="true" draggable="false" width="400" height="400" showEffect="fade" hideEffect="fade" resizable="false">		
		<h:panelGrid columns="2">

			<h:outputLabel value="Nome:" />
			<h:inputText value="#{editClienteMB.dependente.nome}" />

			<h:outputLabel value="E-Mail:" />
			<h:inputText value="#{editClienteMB.dependente.email}" />		

			<h:outputLabel value="CPF:" />
			<h:inputText value="#{editClienteMB.dependente.cpf}" />

			<h:outputLabel value="Sexo:" />
			<h:selectOneMenu value="#{editClienteMB.dependente.sexo}" >  
				<f:selectItem itemValue="MASCULINO" itemLabel="Masculino" />  
				<f:selectItem itemValue="FEMININO" itemLabel="Feminino" />  
			</h:selectOneMenu> 

			<h:outputLabel value="Nascimento:" />
			<ace:dateTimeEntry value="#{editClienteMB.dependente.dataNascimento}" pattern="dd/MM/yyyy" locale="#{loginMB.locale}" renderAsPopup="true" />
		
			<h:commandButton value="Cancelar" onclick="varDialogNovoDependente.hide();" />			
			<h:commandButton value="Adicionar" action="#{editClienteMB.adicionarDependente}" onclick="varDialogNovoDependente.hide();">
				<f:ajax render="dataTableDependentes" execute="dialogNovoDependente" />
			</h:commandButton>
		</h:panelGrid>	
	</ace:dialog>
	
	
	<ace:dialog id="dialogDetalheDependente" header="Detalhes do dependente" widgetVar="varDialogDetalhesDependente" closable="true" modal="true" draggable="false" width="400" height="300" showEffect="fade" hideEffect="fade" resizable="false">		
		<h:panelGrid columns="2">
			<h:outputLabel value="Nome:" />
			<h:outputText value="#{editClienteMB.dependente.nome}" />
			
			<h:outputLabel value="E-Mail:" />
			<h:outputText value="#{editClienteMB.dependente.email}" />		
			
			<h:outputLabel value="CPF:" />
			<h:outputText value="#{editClienteMB.dependente.cpf}" />
			
			<h:outputLabel value="Sexo:" />
			<h:outputText value="#{editClienteMB.dependente.sexo}" />  
						
			<h:outputLabel value="Nascimento:" />
			<h:outputText value="#{editClienteMB.dependente.dataNascimento}" />
		
			<h:commandButton value="Fechar" onclick="varDialogDetalhesDependente.hide();" />			
		</h:panelGrid>	
	</ace:dialog>
	
	
	<ace:dialog id="dialogEditarDependente" header="Editar Dependente" widgetVar="varDialogEditarDependente" closable="true" modal="true" draggable="false" width="400" height="400" showEffect="fade" hideEffect="fade" resizable="false">		
		<h:panelGrid columns="2">
			<h:outputLabel value="Nome:" />
			<h:inputText value="#{editClienteMB.dependente.nome}" />
			
			<h:outputLabel value="E-Mail:" />
			<h:inputText value="#{editClienteMB.dependente.email}" />		
			
			<h:outputLabel value="CPF:" />
			<h:inputText value="#{editClienteMB.dependente.cpf}" />
			
			<h:outputLabel value="Sexo:" />
			<h:selectOneMenu value="#{editClienteMB.dependente.sexo}" >  
				<f:selectItem itemValue="MASCULINO" itemLabel="Masculino" />  
				<f:selectItem itemValue="FEMININO" itemLabel="Feminino" />  
			</h:selectOneMenu> 
		
			<h:outputLabel value="Nascimento:" />
			<ace:dateTimeEntry value="#{editClienteMB.dependente.dataNascimento}" pattern="dd/MM/yyyy" locale="#{loginMB.locale}" renderAsPopup="true" />
		
			<h:commandButton value="Cancelar" onclick="varDialogEditarDependente.hide();" />			
			<h:commandButton value="Gravar" action="#{editClienteMB.editarDependente}" onclick="varDialogEditarDependente.hide();" />
		</h:panelGrid>	
	</ace:dialog>
	
	
	<ace:dialog id="dialogExcluirDependente" header="Excluir Dependente" widgetVar="varDialogExcluirDependente" closable="false" modal="true" draggable="false" minwidth="400" minheight="200" showEffect="fade" hideEffect="fade" resizable="false">		
		<h:outputLabel value="Confirma exclusão do dependente?" />
		<br />
		<h:commandButton value="Cancelar" onclick="varDialogExcluiDependente.hide();" />			
		<h:commandButton value="Excluir" action="#{editClienteMB.excluirDependente}" onclick="varDialogExcluirDependente.hide();" />
	</ace:dialog>

</h:form>
</ui:define>
</ui:composition>